<template>
    <div class="wrapper">
          <div id="cart-index">
               <div class="banner">
                   <mt-swipe :auto="5000">
                        <mt-swipe-item class="item1">1</mt-swipe-item>
                        <mt-swipe-item class="item2">2</mt-swipe-item>
                        <mt-swipe-item class="item3">3</mt-swipe-item>
                    </mt-swipe>
               </div>
          </div>
          <div class="cart-tap">
              
          </div>
          <div class="data">
              <div class="release">最近发布: </div>
              <ul>
                  <li v-for="(item, index) in releaseLists" :key="index" >{{item}}</li>
              </ul>
              <span v-if="releaseList.length > 5" @click="more">更多</span>
           </div>
    </div>
</template>
<script>
import { Swipe, SwipeItem } from 'mint-ui';
import Vue from "vue";
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);
export default {
    data(){
        return {
          releaseList:['所有', '近三天', '近一周','近一个月','近一年', '近两年', '近三年'],
          isMore: true,
        }
    },
    computed: {
        releaseLists: {
            get: function () {
                if (this.isMore) {
                    if (this.releaseList.length < 5) {
                        return this.detailList
                    }
                    let newArr = []
                    for (var i = 0; i < 5; i++) {
                        let item = this.releaseList[i]
                        newArr.push(item)
                    }
                    return newArr
                }
                return this.releaseList
            },
            set: function (val) {
                this.releaseList = val
            }
        }
    },
    methods:{
        more(){
            this.isMore=!this.isMore
        }
    },
    mounted(){

    }

}
</script>
<style lang="stylus">
.wrapper {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #E2E2E2;
    background-size: 100% 100%;
}
.cart-index{
    width:100%;
}
.banner{
    width:100%
    height 3rem
    text-align center
}
.item1{
    background #f00
}
.item2{
    background #ff0
}
.item3{
    background #00f
}
.data{
    width: 100%;
    background: #6666;
    display flex
    min-height .8rem
    line-height .8rem
    }
.release{
    display: inline-flex;
    color red
    min-width 1.3rem
    text-align center
}
.data>ul{

}
li{
    padding 0 .1rem
    display inline-block
}
.data>span{
     min-width 1rem
     text-align center
     color #893321
}
.more{
    overflow hidden
}
</style>


